<template>
	<view class="productList" ref="container">
		<view class="special_bg">
			<image :src="image" mode=""></image>
		</view>
		<view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container">
			<view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
				v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
				<view class="pictrue" :class="Switch === true ? '' : 'on'">
					<image mode="widthFix" :src="item.image" :class="Switch === true ? '' : 'on'" />
				</view>
				<view class="text" :class="Switch === true ? '' : 'on'">
					<view class="name line1">{{ item.storeName }}</view>
					<view class="money font-color-red" :class="Switch === true ? '' : 'on'">
						￥
						<text class="num">{{ item.price }}</text>
					</view>
					<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
						<view class="vip-money">￥{{ item.otPrice }}</view>
						<view>已售{{ item.sales }}件</view>
					</view>
				</view>
			</view>
			<Loading :loaded="loadend" :loading="loading"></Loading>
		</view>

		<view class="noCommodity" v-if="productList.length === 0 && where.page > 1">
			<view class="noPictrue">
				<image src="https://h5.ylsp.vip/file/static/record-bg.png" class="image" />
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getProducts
	} from '@/api/store'
	import Loading from '@/components/Loading'

	export default {
		name: 'special',
		components: {
			Loading,
		},
		props: {},
		data: function() {
			return {
				productList: [],
				Switch: true,
				specialName: '',
				image: '',
				where: {
					page: 1,
					limit: 8,
					keyword: '',
					sid: 0, //二级分类id
					news: 0,
					priceOrder: '',
					salesOrder: '',
				},
				loadTitle: '',
				loading: false,
				loadend: false

			}
		},
		watch: {
			$yroute(to) {
				
			},
		},
		mounted: function() {
			this.where.sid = this.$yroute.query.classId
			this.specialName = this.$yroute.query.specialName
			this.image = this.$yroute.query.image
			console.log(this.$yroute.query.image)
			uni.setNavigationBarTitle({
				title: this.specialName,
			})
			this.getProductList()
		},
		onReachBottom() {
			!this.loading && this.getProductList()
		},
		
		methods: {
			home() {
				this.$yrouter.switchTab({
					path: "/pages/home/index"
				});
			},
			user() {
				this.$yrouter.switchTab({
					path: "/pages/user/User/index"
				});
			},
			goGoodsCon(item) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id,
						isIntegral: this.isIntegral,
					},
				})
			},
			getProductList() {
				var that = this
				getProducts(that.where).then(res => {
					that.loading = false
					that.productList.push.apply(that.productList, res.data)
					that.loadend = res.data.length < that.where.limit
					that.where.page = that.where.page + 1
				})
			}
		},
	}
</script>
<style lang="less">
	page {
		height: auto;
	}

	.noCommodity {
		border-top: 3px solid #f5f5f5;
		padding-bottom: 1px;
	}

	.productList {
		position: relative;

		.special_bg {
			position: relative;
			height: 333rpx;
			width: 100%;
			z-index: 100;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.specialTitle {
			position: absolute;
			top: 60rpx;
			left: 30rpx;
			color: #FFFFFF;
			font-size: 50rpx;
		}

		.footer {
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			display: table;
			table-layout: fixed;

			.item {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				width: 33.3333333333333%;

				.iconfont {
					padding: 13rpx;
					border-radius: 100%;
					background-color: #222222;
					color: #FFFFFF;
				}

				.active {
					background-color: #fa4f50;
				}

				.title {
					display: block;
					text-align: center;
					font-size: 30rpx;
					margin-top: 15rpx;
				}

			}
		}

		.list {
			padding-bottom: 30rpx;
			padding-top: 0;
			margin-top: 0;
		}
	}

	.noCommodity .noPictrue {
		height: 400rpx;
		width: 400rpx;
	}
</style>
